dvh, svh, lvh

❓질문

css 속성 dvh, svh, lvh 란 무엇인가요?

💡 조사하기전 내가 알고 있던 내용

잘 모르겠지만 h가 아마도 height를 의미하는것같습니다 그렇다면 v는 viewport를 의미하는것 같고
뷰포트의 높이를 재는 속성같습니다.

🏫 정리한 내용

CSS에서 dvh, svh, lvh는 뷰포트 높이를 측정하는 새로운 단위입니다. 기존 vh(viewport height)는 브라우저의 뷰포트 높이를 기준으로 설정되지만, 모바일 환경에서는 주소창이나 네비게이션 바의 유무에 따라 동적으로 변할 수 있어 정확한 높이를 계산하기 어렵다는 단점이 있었습니다. 이를 해결하기 위해 dvh, svh, lvh가 등장했습니다.

먼저 dvh(Dynamic Viewport Height)는 동적인 뷰포트 높이를 의미합니다. 사용자가 스크롤하거나 모바일 주소창과 같은 UI 요소가 나타나거나 사라질 때마다 뷰포트의 높이가 변하는 경우, 이를 반영하여 실시간으로 계산된 값을 제공합니다. 예를 들어, 모바일에서 주소창이 사라지면 뷰포트의 높이가 증가하는데, 이 변화를 즉시 반영하는 수치입니다.

svh(Small Viewport Height)는 뷰포트가 가장 작을 때의 높이를 의미합니다. 일반적으로 모바일 브라우저에서 주소창이 보이는 상태에서의 최소 높이를 기준으로 합니다. 따라서 svh를 사용하면, 화면의 공간이 최대로 제한되는 시나리오에서도 UI가 깨지지 않도록 레이아웃을 설계할 수 있습니다.

lvh(Large Viewport Height)는 반대로 뷰포트가 가장 클 때의 높이를 기준으로 합니다. 즉, 모바일에서 주소창이 사라진 후 전체 화면이 확장된 상태의 최대 뷰포트 높이를 나타냅니다. 이를 활용하면 전체 화면을 적극적으로 활용하는 UI를 구성할 수 있습니다.